---
id: navbar
title: Navbar
---

import Playground from '@theme/Playground';

## Standard

<Playground>
  <nav class="navbar">
    <div class="navbar__inner">
      <div class="navbar__items">
        <a class="navbar__brand">Infima</a>
        <a class="navbar__item navbar__link" href="#url">
          Docs
        </a>
        <a class="navbar__item navbar__link" href="#url">
          Tutorial
        </a>
        <div class="navbar__item dropdown dropdown--hoverable">
          <a class="navbar__link" href="#url">
            v2.0
          </a>
          <ul class="dropdown__menu">
            <li>
              <a class="dropdown__link" href="#url">
                v1.8.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                v1.7.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                v1.6.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                All Versions
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar__items navbar__items--right">
        <form>
          <div class="navbar__search">
            <input class="navbar__search-input" placeholder="Search" />
          </div>
        </form>
      </div>
    </div>
  </nav>
</Playground>

## Dark

<Playground>
  <nav class="navbar navbar--dark">
    <div class="navbar__inner">
      <div class="navbar__items">
        <a class="navbar__brand">Infima</a>
        <div class="navbar__item dropdown dropdown--hoverable">
          <a class="navbar__item navbar__link" href="#url">
            v2.0
          </a>
          <ul class="dropdown__menu">
            <li>
              <a class="dropdown__link" href="#url">
                v1.8.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                v1.7.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                v1.6.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                All Versions
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar__items navbar__items--right">
        <a class="navbar__item navbar__link" href="#url">
          Docs
        </a>
        <a class="navbar__item navbar__link" href="#url">
          Tutorial
        </a>
        <form>
          <div class="navbar__search">
            <input class="navbar__search-input" placeholder="Search" />
          </div>
        </form>
      </div>
    </div>
  </nav>
</Playground>

## With Dropdown Menu

<Playground>
  <nav class="navbar navbar--primary">
    <div class="navbar__inner">
      <div class="navbar__items">
        <a class="navbar__item navbar__link" href="#url">
          Docs
        </a>
        <a class="navbar__item navbar__link" href="#url">
          Tutorial
        </a>
        <div class="navbar__item dropdown dropdown--hoverable">
          <a class="navbar__link" href="#url">
            v2.0
          </a>
          <ul class="dropdown__menu">
            <li>
              <a class="dropdown__link" href="#url">
                v1.8.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                v1.7.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                v1.6.0
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                All Versions
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar__items navbar__items--center">
        <a class="navbar__brand">Infima</a>
      </div>
      <div class="navbar__items navbar__items--right">
        <div class="navbar__item dropdown dropdown--hoverable dropdown--right">
          <a class="navbar__link" href="#url">
            Languages <i class="fas fa-language fa-2x"> </i>
          </a>
          <ul class="dropdown__menu">
            <li>
              <a class="dropdown__link" href="#url">
                简体中文
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                日本語
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                Français
              </a>
            </li>
            <li>
              <a class="dropdown__link" href="#url">
                Español
              </a>
            </li>
          </ul>
        </div>
        <a class="navbar__item navbar__link" href="#url">
          <i class="fab fa-github fa-lg"> </i>
        </a>
        <form>
          <div class="navbar__search">
            <input class="navbar__search-input" placeholder="Search" />
          </div>
        </form>
      </div>
    </div>
  </nav>
</Playground>
